<template>
    <view class="bottom">
        <Header></Header>
        <view style="padding-top: 30rpx">
            <!-- 轮播图 -->
            <u-swiper :list="carouselList" height="300" border-radius="25" bg-color="#0f0e2d"></u-swiper>
        </view>
        <!--        <view>-->
        <!--            <uni-notice-bar scrollable single :text="list" showIcon :speed="50" show-get-more-->
        <!--                            background-color="#0f0e2d">-->
        <!--            </uni-notice-bar>-->
        <!--        </view>-->
        <view style="padding-top: 30rpx">
            <view class="grid">
                <view class="grid-item" @click="toMyBox">
                    <u-icon name="bag-fill" :size="46"></u-icon>
                    <view class="grid-text">Backpack</view>
                </view>
                <view class="grid-item" @click="toShareRebate">
                    <u-icon name="share-fill" :size="46"></u-icon>
                    <view class="grid-text">Rebate</view>
                </view>
                <view class="grid-item" @click="toRankingList">
                    <u-icon name="list-dot" :size="46"></u-icon>
                    <view class="grid-text">Top</view>
                </view>
                <view class="grid-item" @click="toRedPacket">
                    <u-icon name="red-packet-fill" :size="46"></u-icon>
                    <view class="grid-text">Red</view>
                </view>
            </view>
        </view>
        <view style="padding-top: 30rpx">
            <view class="freeBox" @click="toFreeBox">
                <view class="text">
                    FREE
                </view>
                <view class="img">
                    <u-image src="@/static/images/index/free.png" width="100%" height="100%" mode="heightFix"></u-image>
                </view>
            </view>
            <view class="box" @click="toOpenBox">
                <view class="text">
                    BOXES
                </view>
                <view class="img">
                    <u-image src="@/static/images/index/case.png" width="100%" height="100%" mode="heightFix"></u-image>
                </view>
            </view>
            <view class="upgrade" @click="toCustomBox">
                <view class="text">
                    UPGRADE
                </view>
                <view class="img">
                    <u-image src="@/static/images/index/upgrade.png" width="100%" height="100%" mode="heightFix"></u-image>
                </view>
            </view>
            <view class="roll" @click="toRoll">
                <view class="text">
                    ROLL
                </view>
                <view class="img">
                    <u-image src="@/static/images/index/roll.png" width="100%" height="100%" mode="heightFix"></u-image>
                </view>
            </view>
        </view>
        <!--  口令红包-->
        <u-popup border-radius="25" mode="center" v-model="commandShow" closeable :width="windowsWidth+'px'">
            <view
                style="display: flex;flex-direction: column;align-items: center;background-color: #0f0e2d">
                <h2 style="padding: 40rpx">Password red envelope</h2>
                <u-input placeholder="please input password" class="input" v-model="commandForm.code"
                         type="text" border/>
                <view style="display: flex;margin-top: 20rpx;margin-bottom: 15rpx">
                    <u-button type="info" @click="commandShow = false" shape="circle" size="medium">Cancel</u-button>
                    <u-button style="margin-left: 50rpx" type="success" @click="commandConfirm" shape="circle"
                              size="medium">Confirm
                    </u-button>
                </view>
            </view>
        </u-popup>
        <u-toast ref="uToast"/>
        <custom-tabbar></custom-tabbar>
    </view>
</template>

<script>
import Header from "@/components/header/header.vue";
import CustomTabbar from "@/components/tabbar/tabbar.vue";
import {EventBus} from "@/eventBus";

export default {
    components: {
        Header,
        CustomTabbar
    },

    data() {
        return {
            windowsWidth: 0,
            carouselList: [],
            list: ' 欢迎来到OI CSGO！本网站禁止未成年人消费！',
            commandShow: false,
            commandForm: {}
        };
    },
    mounted() {
        const element = document.querySelector('.bottom');
        if (element) {
            this.windowsWidth = element.offsetWidth;
            this.$store.commit('common/SET_WINDOWS_WIDTH', this.windowsWidth);
            document.documentElement.style.setProperty('--windows-width', this.windowsWidth + 'px');
            // 保存到本地存储
            uni.setStorageSync('windowsWidth', this.windowsWidth);
        }
    },
    onShow() {
        this.getBanner();
    },
    methods: {
        // 轮播图
        getBanner() {
            this.$u.api.baseInfo().then(res => {
                if (res.code === 1) {
                    // this.carouselList = res.data.banner;
                    this.carouselList = res.data.banner.map(item => {
                        return {
                            image: item.image
                        }
                    })
                }
            })
        },
        // 跳转背包
        toMyBox() {
            // 判断是否登录
            const token = this.$store.getters.getToken ? this.$store.getters.getToken : null;
            if (!token) {
                EventBus.$emit('call-loginOpen');
                return;
            }
            this.$u.route('/pages/my/myBox/myBox');
        },
        // 跳转福利
        toShareRebate() {
            // 判断是否登录
            const token = this.$store.getters.getToken ? this.$store.getters.getToken : null;
            if (!token) {
                EventBus.$emit('call-loginOpen');
                return;
            }
            this.$u.route('/pages/shareRebate/shareRebate');
        },
        // 跳转自定义盲盒
        toCustomBox() {
            // 判断是否登录
            const token = this.$store.getters.getToken ? this.$store.getters.getToken : null;
            if (!token) {
                EventBus.$emit('call-loginOpen');
                return;
            }
            this.$u.route('/pages/prizeRate/prizeRate');
        },
        // 跳转红包
        toRedPacket() {
            // 判断是否登录
            const token = this.$store.getters.getToken ? this.$store.getters.getToken : null;
            if (!token) {
                EventBus.$emit('call-loginOpen');
                return;
            }
            this.commandForm = {}
            this.commandShow = true
        },
        // 跳转免费箱子
        toFreeBox() {
            const token = this.$store.getters.getToken ? this.$store.getters.getToken : null;
            if (!token) {
                EventBus.$emit('call-loginOpen');
                return;
            }
            this.$u.route('/pages/freeBox/freeBox');
        },
        // 跳转开箱
        toOpenBox() {
            const token = this.$store.getters.getToken ? this.$store.getters.getToken : null;
            if (!token) {
                EventBus.$emit('call-loginOpen');
                return;
            }
            this.$u.route('/pages/box/box');
        },
        // 跳转福利房
        toRoll() {
            // 判断是否登录
            const token = this.$store.getters.getToken ? this.$store.getters.getToken : null;
            if (!token) {
                EventBus.$emit('call-loginOpen');
                return;
            }
            this.$u.route('/pages/exercise/exercise');
        },
        // 口令红包领取
        commandConfirm() {
            if (!this.commandForm.code) {
                this.$u.toast('请输入口令');
                return;
            }
            this.$u.api.getRedPacket({
                code: this.commandForm.code
            }).then(res => {
                if (res.code === 1) {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'success'
                    })
                    this.$u.api.getUserInfo().then(response => {
                        if (response.code === 1) {
                            const user = response.data;
                            // 提交mutation来更新Vuex中的状态
                            this.$store.commit('user/SET_USER', user);
                            // 保存到本地存储
                            uni.setStorageSync('user', user);
                        }
                    })
                    this.commandForm = {}
                    this.commandShow = false
                } else {
                    this.$refs.uToast.show({
                        title: res.msg,
                        type: 'error'
                    })
                }
            })
        },
        // 跳转排行榜
        toRankingList() {
            // 判断是否登录
            const token = this.$store.getters.getToken ? this.$store.getters.getToken : null;
            if (!token) {
                EventBus.$emit('call-loginOpen');
                return;
            }
            this.$u.route('/pages/rankingList/rankingList');
        }
    }
};
</script>

<style scoped lang="scss">
.padding-20 {
    padding: 20rpx;
}

.grid {
    display: flex;
    justify-content: space-evenly;

    .grid-item {
        width: 170rpx;
        height: 150rpx;
        //background-color: #71cafd;
        border-radius: 25rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 10rpx;

        color: #dcae64;
        background-image:linear-gradient(57deg,#1e3c72 ,#2a5298 100%);

        .grid-text {
            margin-top: 10rpx;
        }
    }
}

.freeBox {
    background-image: linear-gradient(-40deg, #1f3864 10%, #0d0d2f 100%);
    height: 300rpx;
    position: relative;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    overflow: hidden;

    .text {
        position: absolute;
        top: 50%;
        left: 50rpx;
        transform: translate(0, -50%);
        font-size: 60rpx;
        font-weight: bold;
    }

    .img {
        position: absolute;
        top: 50%;
        left: 70%;
        transform: translate(-50%, -50%);
        height: 60%;

    }
}

.box {
    background-image: linear-gradient(-40deg, #b6208c 10%, #1b0f33 100%);
    height: 300rpx;
    position: relative;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    overflow: hidden;

    .text {
        position: absolute;
        top: 50%;
        left: 50rpx;
        transform: translate(0, -50%);
        font-size: 60rpx;
        font-weight: bold;
    }

    .img {
        position: absolute;
        top: 50%;
        left: 70%;
        transform: translate(-50%, -50%);
        height: 80%;

    }
}

.upgrade {
    background-image: linear-gradient(-40deg, #1f406d 10%, #34552d 100%);
    height: 300rpx;
    position: relative;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    overflow: hidden;

    .text {
        position: absolute;
        top: 50%;
        left: 50rpx;
        transform: translate(0, -50%);
        font-size: 60rpx;
        font-weight: bold;
    }

    .img {
        position: absolute;
        top: 50%;
        left: 70%;
        transform: translate(-50%, -50%);
        height: 70%;

    }
}

.roll {
    background-image: linear-gradient(-40deg, #401741 10%, #140d2f 100%);
    height: 300rpx;
    position: relative;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    overflow: hidden;

    .text {
        position: absolute;
        top: 50%;
        left: 50rpx;
        transform: translate(0, -50%);
        font-size: 60rpx;
        font-weight: bold;
    }

    .img {
        position: absolute;
        top: 50%;
        left: 70%;
        transform: translate(-50%, -50%);
        height: 100%;

    }
}

.input {
    width: 80%;
    margin-bottom: 30rpx;

    ::v-deep .uni-input-input {
        color: #ffffff;
    }
}

::v-deep .u-type-success {
    background-color: #0f0e2d;
    border: none;
}

::v-deep .u-type-error {
    background-color: #0f0e2d;
    border: none;
}
</style>